<template>
  <Header>
    <template v-slot:left>
        上
    </template>
    <template v-slot:default>
        首页
    </template>
    <template v-slot:right>
        下
    </template>
  </Header>
  
  <div class="wrapper" id="wrapper" v-loading="list">
    <ul class="content" id="content">
      <li class="item" v-for="(item, index) in list" :key="index">
        <img  alt="" v-lazy="item.cover_url" />
        <p>
          {{ item.title }}
        </p>
      </li>
    </ul>
  </div>
  <div class="go_top" v-if="isShow" @click="goTop">返回顶部</div>
</template>
<script>
  import Header from "components/common/Header/index.vue"
import { nextTick, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { getGoods } from "api";
import BScroll from "better-scroll";

export default {
  name: "Home",
  components:{
    Header
  },

  setup(props) {
    const state = reactive({
      isShow: false,
      list: [],
      scroll: null,
      form: {
        page: 1,
      },
    });

    let time0 = 0;
    let timer = null;

    onMounted(async () => {
      //获取商品列表
      let data = await getGoods(state.form);
      // console.log(data);
      state.list = data.data.goods.data;
      state.scroll = new BScroll(".wrapper", {
        probeType: 3, //实时获取滚动坐标位置
        scrollY: true,
        click: true,
      });
      // 监听滚动时的返回
      state.scroll.on("scroll", debounce(onScroll, 50));
      nextTick(() => {
        state.scroll.refresh();
      });
    });

    onUnmounted(() => {
      if (timer) clearTimeout(timer);
    });

    // 节流函数
    function debounce(func, delay) {
      let time1 = Date.now();
      if (time1 - time0 > delay) {
        time0 = time1;
        return function (...args) {
          if (timer) clearTimeout(timer);
          timer = setTimeout(() => {
            func.apply(this, args);
          }, delay);
        };
      }
    }

    // 返回顶部
    function goTop(){
      state.scroll.scrollTo(0,0,500)
    }

    // 滚动加载事件
    const onScroll = async (position) => {
      let h1 = document.querySelector("#content").clientHeight;
      let h = document.querySelector("#wrapper").clientHeight;
      console.log(position.y);
      if(position.y<-500){
        state.isShow=true
      }
      if(position.y>-500){
        state.isShow=false
      }
      if (position.y <= h - h1 + 200) {
        // 加载下一页
        console.log("next_page");
        state.form.page += 1;
        let data = await getGoods(state.form);
        state.list = [...state.list, ...data.data.goods.data];
      }
      if (position.y >= 50) {
        // 刷新
        console.log("clear");
        state.form.page = 1;
        let data = await getGoods(state.form);
        state.list = data.data.goods.data;
      }

      nextTick(() => {
        state.scroll.refresh();
      });
    };

    return {
      ...toRefs(state),
      goTop
    };
  },
};
</script>
  
<style lang='scss' scoped>
.go_top {
  z-index: 999;
  position: fixed;
  bottom: 0.6rem;
  right: 0.2rem;
}
.wrapper {
  position: absolute;
  top: 0.45rem;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  height: calc(100vh - 0.95rem);
  overflow: hidden;
}

h2 {
  color: $Color;
  font-size: $Font_60;
}
img {
  width: 2rem;
  height: 2rem;
}
.img {
  width: 2rem;
  height: 2rem;
  background-image: url(~img/book1.jpg);
  background-size: cover;
}
.content {
  min-height: 100vh;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    height: 2rem;
  }
  p{
    font-size: 0.16rem;
  }
}
</style>
  